<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>unigo框架html5验证器使用说明</title>

<link href="../../../css/def/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
  <script src="../../bootstrap/assets/html5shiv.min.js"></script>
  <script src="../../bootstrap/assets/respond.min.js"></script>
<![endif]-->
<script src="../../jquery/jquery-1.12.4.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../bootstrap/assets/ie10-viewport-bug-workaround.js"></script>
<script src="upfValidator.js"></script>
<script src="upfValidator.check.js"></script>


</head>
<body>
  <p>
     upfValidator，是unigo框架中的基于jquery、bootstrap的表单验证器。其提供了对表单元素验证的注册、自动验证和手工验证等方法，
     可以方便地使用。
  </p>
  
  <h3>使用</h3>
  <p>
    upfValidator依赖于jquery、bootstrap，所以其需要相关的资源，下面是一个本示例的引用代码：<br/><br/>
    
    &lt;link href="../../../css/def/bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;<br/>

&lt;!--[if lt IE 9]&gt;<br/>
  &lt;script src="../../bootstrap/assets/html5shiv.min.js"&gt;&lt;/script&gt;<br/>
  &lt;script src="../../bootstrap/assets/respond.min.js"&gt;&lt;/script&gt;<br/>
&lt;![endif]--&gt;<br/>
&lt;script src="../../jquery/jquery-1.12.4.min.js"&gt;&lt;/script&gt;<br/>
&lt;script src="../../bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;<br/>
&lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;<br/>
&lt;script src="../../bootstrap/assets/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;<br/>
&lt;script src="upfValidator.js"&gt;&lt;/script&gt;<br/>
  </p>
  
  <h3>示例</h3>
    <script type="text/javascript">
    function checkTest(id){
    	return "这里自定义的提示信息，可以根据验证情况，自定义";
    }
    $(document).ready(function() {
    	var v = new UpfValidator("fm");
        $("#name").uv(v,{method : checkNotEmpty,args : ['name']});
        $("#passwd").uv(v,{method : checkNotEmpty,args : ['passwd']});
        
        
        //$("#name").uv(v,{method : checkTest,args : ['name']});
        //var valid = v.valid();
        //alert(valid);
    });
    
    
    </script>
    <div style="width: 315px">
      <form action="#" class="form-horizontal" id="fm">
        <input type="text" id="name" name="name" class="form-control"/>
        <div style="margin-left: 30px" id="nameHelpBlock" class="help-block">用户名不能为空</div>
      </form>
    </div>
    
    <h3>示例代码说明</h3>
    <p>
       使用upfValidator，你必须为form指定id，然后使用此id创建验证器对象。代码如下： <br/>
       var v = new UpfValidator("fm");<br/>
     对于每个需要验证的对象，同样需要指定其元素id，并为其指定一个显示帮助或提示信息的div。下面的示例代码如下：<br/>
      &lt;form action="#" class="form-horizontal" id="fm"&gt;<br/>
        &lt;input type="text" id="name" name="name" class="form-control"/&gt;<br/>
        &lt;div style="margin-left: 30px" id="nameHelpBlock" class="help-block"&gt;用户名不能为空&lt;/div&gt;<br/>
      &lt;/form&gt;
      信息提示DIV ID 值为验证元素id+HelpBlock，如示例验证元素的ID为name，则提示信息ID为 nameHelpBlock<br/>
      对每一个需要验证的元素，定义如下：<br/>
      $("#name").uv(v,{method : checkNotEmpty,args : ['name']});<br/>
      其中：<br/>
      method : 验证方法名<br/>
      args ： 数组，验证方法所需要的参数<br/>
      对于验证方法，如验证通过，则返回true，验证不通过，可以返回false，这时将显示HelpBlock的信息，也可以返回一个字符串，如返回字符串，则使用这个返回值做为提示信息。<br/>
      如果要置某个元素不再进行验证，如保存而不提交时，则有些元素是可以不验证的。则可以使用以下方法进行删除：<br/>
      v.deleteElm("id");<br/>
      添加元素：<br/>
      v.addElm("id");<br/>
      
    </p>
</body>
</html>